<template>
  <div class="video-module">
    <!-- 头部模块 -->
    <div class="header-container">
      <div class="emergency-header">
        <div class="black-block"></div>
        <div class="red-title">
          <el-icon><Film /></el-icon>
          寻亲视频展播
        </div>
      </div>
    </div>

    <!-- 视频播放器 -->
    <div class="video-container">
      <video
        ref="videoPlayer"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="800"
        height="450"
        :poster="currentVideo.poster"
        @play="handlePlay"
      >
        <source :src="currentVideo.source" :type="currentVideo.source.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'">
      </video>
    </div>

    <!-- 视频信息区域 -->
    <div class="info-section">
      <div class="video-meta">
        <h2 class="video-title">{{ currentVideo.title }}</h2>
        <div class="meta-details">
          <span>发布日期：{{ currentVideo.publishDate }}</span>
          <span>播放量：{{ currentVideo.views }}次</span>
        </div>
        <p class="video-description">{{ currentVideo.description }}</p>
      </div>

      <!-- 相关视频列表 -->
      <div class="related-videos">
        <h3 class="section-title">相关寻亲视频</h3>
        <div class="video-grid">
          <div
            v-for="(video, index) in relatedVideos"
            :key="index"
            class="video-card"
            @click="handleVideoChange(video)"
          >
            <img :src="video.poster" class="video-thumbnail" :alt="video.title">
            <p class="video-caption">{{ video.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref } from 'vue'
import { Film } from '@element-plus/icons-vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import '@videojs/http-streaming'

// 视频播放器实例
const videoPlayer = ref<HTMLVideoElement | null>(null)
let player: any = null

// 视频数据
const currentVideo = reactive({
  title: '寻找1998年出生的弟弟',
  publishDate: '2024-02-15',
  views: 12000,
  description: '特征描述：右耳后有明显胎记，失踪时身穿蓝色条纹毛衣，身高约110cm。最后一次出现地点在成都市春熙路步行街。',
  source: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', // 使用测试 m3u8 流
  poster: `https://picsum.photos/seed/${Math.random()}/800/450`
})

const relatedVideos = ref([
  {
    title: '寻找2000年出生的妹妹',
    publishDate: '2024-03-01',
    views: 8000,
    description: '特征描述：左眼角有颗小痣，失踪时身穿红色连衣裙，身高约100cm。最后一次出现地点在北京市王府井步行街。',
    source: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    poster: `https://picsum.photos/seed/${Math.random()}/800/450`
  },
  {
    title: '寻找1999年出生的哥哥',
    publishDate: '2024-02-20',
    views: 10000,
    description: '特征描述：左手有颗胎记，失踪时身穿黑色运动服，身高约120cm。最后一次出现地点在上海市南京路步行街。',
    source: 'https://vjs.zencdn.net/v/oceans.mp4',
    poster: `https://picsum.photos/seed/${Math.random()}/800/450`
  },
  {
    title: '寻找1997年出生的姐姐',
    publishDate: '2024-04-01',
    views: 5000,
    description: '特征描述：右手有明显的伤疤，失踪时身穿白色T恤，身高约150cm。最后一次出现地点在广州市天河路。',
    source: 'https://vjs.zencdn.net/v/oceans.mp4',
    poster: `https://picsum.photos/seed/${Math.random()}/800/450`
  },
  {
    title: '寻找2001年出生的弟弟',
    publishDate: '2024-05-01',
    views: 3000,
    description: '特征描述：左耳有小耳廓，失踪时身穿绿色外套，身高约110cm。最后一次出现地点在深圳市罗湖区。',
    source: 'https://vjs.zencdn.net/v/oceans.mp4',
    poster: `https://picsum.photos/seed/${Math.random()}/800/450`
  }
])

// 播放统计
const handlePlay = () => {
  currentVideo.views = currentVideo.views + 1
}

// 切换视频
const handleVideoChange = (video: any) => {
  Object.assign(currentVideo, video)
  if (player) {
    const isM3U8 = video.source.endsWith('.m3u8')
    player.src({
      src: video.source,
      type: isM3U8 ? 'application/x-mpegURL' : 'video/mp4'
    })
  }
}

// 生命周期
onMounted(() => {
  if (videoPlayer.value) {
    player = videojs(videoPlayer.value, {
      fluid: true,
      aspectRatio: '16:9',
      playbackRates: [0.5, 1, 1.5, 2],
      sources: [{
        src: currentVideo.source,
        type: currentVideo.source.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
      }],
      controlBar: {
        children: [
          'playToggle',
          'volumePanel',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'playbackRateMenuButton',
          'fullscreenToggle'
        ],
        volumePanel: {
          inline: false,
          vertical: true
        },
        pictureInPictureToggle: false,
        playbackRateMenuButton: {
          rates: [0.5, 1, 1.5, 2]
        }
      },
      userActions: {
        hotkeys: {
          playPauseKey: true,
          rewindKey: false,
          forwardKey: false,
          volumeUpKey: true,
          volumeDownKey: true,
          muteKey: true,
          fullscreenKey: true
        }
      }
    })

    // 添加错误处理
    player.on('error', (error: any) => {
      console.error('视频播放错误:', error)
      // 如果播放失败，尝试使用备用视频源
      if (error.code === 4) {
        const isM3U8 = currentVideo.source.endsWith('.m3u8')
        const fallbackSource = isM3U8
          ? 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
          : 'https://vjs.zencdn.net/v/oceans.mp4'

        player.src({
          src: fallbackSource,
          type: isM3U8 ? 'application/x-mpegURL' : 'video/mp4'
        })
      }
    })
  }
})

onBeforeUnmount(() => {
  if (player) {
    player.dispose()
  }
})
</script>

<style scoped>
.video-module {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 20px;
}

.emergency-header {
  display: flex;
  height: 45px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.black-block {
  width: 10px;
  background: var(--reverse-background-color);
}

.red-title {
  flex: 1;
  background: #f45c5c;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 600;
  gap: 10px;
}

.video-container {
  width: 70%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.video-js {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16/9;
}

.info-section {
  padding: 10px 15px;
  background: var(--background-color);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 12px;
}

.video-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.video-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.meta-details {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: #666;
}

.video-description {
  line-height: 1.5;
  margin: 0;
  font-size: 14px;
  color: #333;
}

.related-videos {
  margin-top: 0;
}

.section-title {
  border-left: 3px solid #9b2a2a;
  padding-left: 8px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.video-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-top: 0;
}

.video-card {
  flex-shrink: 0;
  width: 200px;
  cursor: pointer;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: translateY(-3px);
}

.video-thumbnail {
  width: 200px;
  height: 112px;
  object-fit: cover;
  border-radius: 4px;
  background: #f0f0f0;
}

.video-caption {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:deep(.video-js .vjs-big-play-button) {
  background-color: rgba(244, 92, 92, 0.8);
  border-color: #f45c5c;
}

:deep(.video-js .vjs-big-play-button:hover) {
  background-color: #f45c5c;
  border-color: #f45c5c;
}

:deep(.video-js .vjs-playback-rate .vjs-playback-rate-value) {
  font-size: 1.5em;
  line-height: 2;
}

:deep(.video-js .vjs-slider) {
  background-color: rgba(255, 255, 255, 0.3);
}

:deep(.video-js .vjs-play-progress) {
  background-color: #f45c5c;
}
</style>
